Hover

A Chrome extension that provides render-on-hover functionality for image-as-code formats like PlantUML and SVG.

Features

Version 1

Planned for Version 2

Installation

From Chrome Web Store (Coming Soon)

  1. Visit the Chrome Web Store (link to be added)
  2. Click "Add to Chrome"
  3. Confirm the installation

Manual Installation (Developer Mode)

  1. Clone this repository or download as a ZIP file
  2. Extract the files if needed
  3. Open Chrome and go to chrome://extensions/
  4. Enable "Developer mode" in the top-right corner
  5. Click "Load unpacked" and select the extension folder
  6. The extension should now be installed and active

Usage

  1. Browse to any webpage that contains PlantUML or SVG code blocks
  2. Hover your mouse over a code block
  3. A popup will appear with the rendered diagram
  4. The popup will automatically disappear when you move your cursor away

Settings

Click on the extension icon to access the following settings:

For advanced settings, click on "Advanced Options" to configure:

Development

Prerequisites

Local Setup

  1. Clone the repository
  2. Run npm install to install dependencies
  3. Run npm run convert-icons to generate PNG icons from SVG
  4. Run npm run build to build the extension
  5. The built extension will be in the dist directory

Build Commands

# Development build with watch mode
npm run dev

# Production build
npm run build

# Run tests
npm test

# Package the extension
npm run package

# Convert SVG icons to PNG
npm run convert-icons

Containerized Build with Podman

The project includes Podman Compose support for building, testing, and packaging the extension in isolated containers.

# Make the podman script executable
chmod +x scripts/podman-run.sh

# Run the complete build pipeline
./scripts/podman-run.sh pipeline

# Individual commands
./scripts/podman-run.sh build    # Build the extension
./scripts/podman-run.sh test     # Run tests
./scripts/podman-run.sh package  # Package the extension
./scripts/podman-run.sh icons    # Convert icons
./scripts/podman-run.sh dev      # Run in development mode
./scripts/podman-run.sh clean    # Clean up containers

How It Works

The extension uses content scripts to detect when you hover over code blocks. When a code block containing PlantUML or SVG is detected, it:

  1. For PlantUML: Encodes the UML text using the DEFLATE algorithm and sends it to the PlantUML server
  2. For SVG: Directly renders the SVG code
  3. Displays the rendered image in a popup

The extension implements debouncing to prevent excessive API calls, waiting at least 15 seconds (configurable) between renderings.

Technical Details

PlantUML Encoding

PlantUML diagrams are encoded using the following process:

  1. Convert the PlantUML text to a Uint8Array
  2. Compress it using the DEFLATE algorithm
  3. Convert the compressed data to base64
  4. Replace certain characters to make it URL-safe
  5. Send it to the PlantUML server for rendering

Extension Structure

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments


Because image-as-code formats are almost native to markdown and html now, and it's just annoying that mermaid is rendered, but plantuml isn't.

  1. Chrome Plugin

NB: Use at your own risk. Most of this code was "vibe-coded" using CursorAI.

const url = https://www.plantuml.com/plantuml/png/~1${encoded}; console.log('PlantUML URL:', url); return url;